<%--
    Copyright 2010 mazhao.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    under the License.

    Document   : cart
    Created on : Oct 8, 2010, 11:30:38 PM
    Author     : mazhao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Cart</title>
    <script type="text/javascript">
        DEBUG = true;
        $(document).ready(function() {

            // automatically summary
            summary();
            // invoke cart update function when update button clicked.
            $("#updateCartBtn").click(function() {
                $.log("update cart button clicked");
                submitCartForm();
            });

            $("#checkoutCartBtn").click(function() {
                $("#gotoCheckout").submit();
            });
        });

        function summary() {
            $.log("summary begin");
            var sumop = 0.0;
            var summp = 0.0;
            var sumsp = 0.0;
            var sumcnt = 0;

            $("table#cartTable tbody tr").each(function(i) {
                $.log("each time");
                var curCnt = parseInt($(this).children(":nth-child(10)").children(":nth-child(1)").attr("value"))
                sumop += parseFloat($(this).children(":nth-child(4)").html()) * curCnt;
                summp += parseFloat($(this).children(":nth-child(5)").html()) * curCnt;
                sumsp += parseFloat($(this).children(":nth-child(6)").html()) * curCnt;
                sumcnt += curCnt;
                $.log("each time op:" + sumop);
                $.log("each time mp:" + summp);
                $.log("each time sp:" + sumsp);
                $.log("each time cnt:" + sumcnt);
            });

            $("#summaryOP").html(sumop);
            $("#summaryMP").html(summp);
            $("#summarySP").html(sumsp);
            $("#summaryCNT").html(sumcnt);
        }


        /**
         * change server side shopping cart items.
         * !!!
         *   the best way is using struts 2 syntex
         *   but I tried for many times, but it always failed.
         * !!!
         * @todo: change to struts 2 syntex
         */
        function submitCartForm() {
            $.log("submit cart form called");
            var data = "";
            $("table#cartTable tbody tr").each(function(i) {
                if (i > 0) {
                    data += "&";
                }
                data += "cartItems[" + i + "]=" + $(this).children(":nth-child(10)").children(":nth-child(1)").attr("name") + "_";
                data += $(this).children(":nth-child(10)").children(":nth-child(1)").attr("value");
            });

            var url = "<%= request.getContextPath() %>/front/onthefly/updatecart.action?" + data;
            $.log("post url :" + url);
            $.log("post data:" + data);

            $.post(url,
                    null,
                    afterUpdateCart,
                    "json");
        }

        /**
         * call back function called after update card.
         * show notify when success.
         * !!!
         * @todo: when failed.
         * !!!
         */
        function afterUpdateCart(data) {
            $.log("receive data:");
            $.log(data.msg);
            $.log(data.onTheFlyStatus);

            // delete empty item(accoutn == zero)
            $("table#cartTable tbody tr").each(function(i) {
                if (parseInt($(this).children(":nth-child(10)").children(":nth-child(1)").attr("value")) == 0) {
                    $(this).remove();
                }

            });

            // show update status
            if (data.onTheFlyStatus == true) {
                $.log("put cart successfully");
                $.jGrowl(data.onTheFlyMessage);
                summary();
            }
        }

    </script>
</head>
<body>
<h1>This is shopping cart.</h1>

<div class="span-10">
    <table id="cartTable" class="alt">
        <thead>
        <tr>
            <td>Catalog</td>
            <td>Name</td>
            <td>Description</td>
            <td>Original Price</td>
            <td>Member Price</td>
            <td>Special Price</td>
            <td>Discount</td>
            <td>Point</td>
            <td>Star</td>
            <td>Account</td>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="%{ items.entrySet().iterator()}" var="item" status="sts">
            <tr>
                <td><s:property value="%{ #item.key.catalogName }"/></td>
                <td><s:property value="%{ #item.key.name }"/></td>
                <td><s:property value="%{ #item.key.description }"/></td>
                <td><s:property value="%{ #item.key.originalPrice }"/></td>
                <td><s:property value="%{ #item.key.memberPrice }"/></td>
                <td><s:property value="%{ #item.key.specialPrice }"/></td>
                <td><s:property value="%{ #item.key.discount }"/></td>
                <td><s:property value="%{ #item.key.point }"/></td>
                <td><s:property value="%{ #item.key.star }"/></td>
                <td>
                    <input type="text" maxlength="4" style="width: 40px"
                           name="<s:property value='%{ #item.key.id }'/>"
                           value="<s:property value='#item.value'/>"/>
                </td>

            </tr>
        </s:iterator>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">Summary</td>
            <td id="summaryOP">originalPrice</td>
            <td id="summaryMP">memeberPrice</td>
            <td id="summarySP">specialPrice</td>
            <td colspan="3"></td>
            <td id="summaryCNT">accountsum</td>
        </tr>
        </tfoot>

    </table>
</div>
<div class="span-20 last alt">
    <button id="updateCartBtn" class="alt">Update</button>
    <button id="checkoutCartBtn" class="alt">Checkout</button>

    <s:form id="gotoCheckout" namespace="/customer" action="showcheckout">
    </s:form>
</div>
</body>
</html>
